<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table{
        border-collapse: collapse;
    }
    thead{
        background-color: #ccc;
    }
    th,td{
        width: 100px;
        height: 40px;
        text-align: center;
    }
    .active {
      color: rgb(18, 54, 238);
      text-decoration: underline;
      cursor: pointer;
    }
    .ab{
      color: blue;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <h1>动态创建表格</h1>
  <table id="wrap" border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>科目</th>
        <th>成绩</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="tb">
    </tbody>
  </table>
  <script>
    var datas = [
      {name: 'zs', subject: '语文', score: 80},
      {name: 'ls', subject: '数学', score: 60},
      {name: 'ww', subject: '体育', score: 89},
      {name: 'lb', subject: '音乐', score: 72},
      {name: 'gy', subject: '美术', score: 90},
      {name: 'zf', subject: '政治', score: 34},
    ];
    var ta = document.getElementById("wrap");
    var tb = document.getElementById("tb");
    // console.log(datas.length);
    for (let index = 0; index < datas.length; index++) {
      var tr = document.createElement("tr");
      // console.log(tr);
      // console.log(datas);
      tb.appendChild(tr)
      for (var key in datas[index]) {
        var td = document.createElement("td");
        td.innerText = datas[index][key]
        // console.log(td);
        tr.appendChild(td)
      } 
      var del = document.createElement("td");
        del.className = "ab"
        del.innerText = "删除"
        tr.appendChild(del)
    }
    // console.log(tr);
    var abb = document.getElementsByClassName("ab")
    // console.dir(abb)
    for (let index2 = 0; index2 < abb.length; index2++) {
      abb[index2].onclick = function () {
        var abn = this.parentNode
        tb.removeChild(abn)
      }
    }
  </script>
</body>
</html>